<script lang="js" setup>
import req from '@/utils/req/axios'
import urls from '@/utils/constants/urls'
import {ref, onBeforeUnmount} from 'vue'
import SocketBox from '@/components/test/socket/SocketBox.vue'
import {close} from '@/utils/websocket/index.js'

const nsp = ''

const socketList = [
  {
    id: 1,
    name: '天津',
  },
  {
    id: 2,
    name: '上海',
  },
  {
    id: 3,
    name: '广州',
  },
]
const message = ref('')

function handleSendAll() {
  req.post(urls.v1.system.websocket.sendAll, {
    message: message.value,
  })
}

onBeforeUnmount(() => {
  close(nsp)
})
</script>
<template>
  <main class="socket-test">
    <el-input v-model="message" clearable/>
    <el-button @click="handleSendAll">发送全局消息</el-button>
    <div>
      <SocketBox v-for="item in socketList" :key="item.id" :box-id="item.id" :nsp="nsp"/>
    </div>
  </main>
</template>
